<template>
  <el-form-item prop="vercode">
    <el-input class="vercode-input" placeholder="輸入驗證碼" v-model="form.vercode" auto-complete="off">
      <template slot="append">
        <div v-if="showTime" class="append-text">{{timeCount}}</div>
        <div v-else @click="handleClick" class="append-text">獲取驗證碼</div>
      </template>
    </el-input>
  </el-form-item>
</template>

<script>
export default {
  name: 'vercode-input',
  props: {
    form: {
      type: Object
    },
    showTime: {
      type: Boolean,
      default: false
    },
    timeCount: {
      type: Number
    }
  },
  methods: {
    handleClick () {
      this.$emit('handleVercode')
    }
  }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">
.vercode-input {
  box-sizing: border-box;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 42px;
  .el-input__inner {
    height: 91px;
    line-height: 91px;
    padding: 0 26px;
    background: rgba(255, 255, 255, 0);
    border-top-left-radius: 46px;
    border-bottom-left-radius: 46px;
    border: none;
    outline: none;
    font-size: 36px;
    color: rgba(206, 166, 207, 1);
  }
  .el-input-group__append {
    position: relative;
    box-sizing: border-box;
    width: 210px;
    height: 91px;
    line-height: 91px;
    padding: 0;
    background: rgba(255, 255, 255, 0);
    font-size:26px;
    color: #fff;
    text-align: center;
    border: none;
    &:after{
      position: absolute;
      left: 0;
      top: 23px;
      height: 46px;
      border-left: 1px solid #fff; /*no*/
      content: '';
    }
  }
}
@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5) {
  .el-input-group__prepend{
    &:after {
      -webkit-transform: scaleX(0.7);
      transform: scaleX(0.7);
    }
  }
}

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2) {
  .el-input-group__prepend{
    &:after{
      -webkit-transform: scaleX(0.5);
      transform: scaleX(0.5);
    }
  }
}
</style>
